<template>
  <div v-if="data._isInit">
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('数据配置')" name="2">
      <el-form-item :label="$t('数据视图')">
        <l-dbsource-select
          v-model="config.dataCode"
          @change="handleDataSourceChange"
          @init="handleDataSourceInit"
        />
      </el-form-item>
      <el-form-item :label="$t('维度')">
        <l-select v-model="config.labelKey" :options="fieldOptions" />
      </el-form-item>
      <el-form-item :label="$t('指标')">
        <l-select v-model="config.valueKey" :options="fieldOptions" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('饼图设置')" name="3">
      <el-form-item :label="$t('圆心大小')">
        <el-slider v-model="pie.radiusN" />
      </el-form-item>
      <el-form-item :label="$t('外圆大小')">
        <el-slider v-model="pie.radiusW" />
      </el-form-item>
      <el-form-item :label="$t('水平位置')">
        <el-slider v-model="pie.centerH" />
      </el-form-item>
      <el-form-item :label="$t('垂直位置')">
        <el-slider v-model="pie.centerV" />
      </el-form-item>
      <el-form-item :label="$t('南丁格尔')">
        <l-select :options="roseTypeOptions" v-model="pie.roseType" />
      </el-form-item>
      <el-form-item :label="$t('圆角大小')">
        <el-slider v-model="series.itemStyle.borderRadius" />
      </el-form-item>
      <el-form-item :label="$t('选中模式')">
        <l-select :options="selectedModeOptions" v-model="pie.selectedMode" />
      </el-form-item>
      <el-form-item :label="$t('默认选中')">
        <el-input-number
          v-model="pie.selectedModeNum"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('文本标签')" name="4">
      <el-form-item :label="$t('是否显示')">
        <el-switch v-model="label.show" />
      </el-form-item>
      <el-form-item v-if="!label.show" :label="$t('末项显示')">
        <el-switch v-model="label.lastShow" />
      </el-form-item>
      <template v-if="label.show || label.lastShow">
        <el-form-item :label="$t('文本颜色')">
          <l-input-color v-model="label.color" />
        </el-form-item>
        <el-form-item :label="$t('文本底色')">
          <l-input-color v-model="label.backgroundColor" />
        </el-form-item>
        <el-form-item :label="$t('文本位置')">
          <l-select
            :clearable="false"
            :options="labelPositionOptions"
            v-model="label.position"
          />
        </el-form-item>
        <el-form-item :label="$t('文本粗细')">
          <l-select
            :clearable="false"
            :options="labelFontWeightOptions"
            v-model="label.fontWeight"
          />
        </el-form-item>

        <el-form-item :label="$t('字体大小')">
          <el-input-number
            v-model="label.fontSize"
            :max="24"
            :min="12"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('格式方式')">
          <l-select
            :clearable="false"
            :options="labelFormatterTypeOptions"
            v-model="label.formatterType"
          />
        </el-form-item>
        <el-form-item v-if="label.formatterType == 'fn'" :label="$t('格式脚本')">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddCode('labelFormatter')"
            >{{ $t("设置") }}</el-button
          >
        </el-form-item>
        <el-form-item v-else :label="$t('格式文本')">
          <el-input class="l-input-icon" v-model="label.formatter">
            <template slot="append">
              <el-popover
                placement="top-start"
                :title="$t('参数说明')"
                width="400"
                trigger="hover"
              >
                <p><span style="color: #ff0033">{a}</span>：{{ $t('系列名') }}。</p>
                <p><span style="color: #ff0033">{b}</span>：{{ $t('数据名') }}。</p>
                <p><span style="color: #ff0033">{c}</span>：{{ $t('数据值') }}。</p>
                <p><span style="color: #ff0033">{d}</span>：{{ $t('百分比') }}。</p>
                <p><span style="color: #ff0033">{e}</span>：{{ $t('换行') }}。</p>
                <p>
                  <span style="color: #ff0033">{@xxx}</span>：{{ $t('数据中名为') }}
                  <span style="color: #ff0033">'xxx'</span> {{ $t('的维度的值，如') }}
                  <span style="color: #ff0033">{@product}</span> {{ $t('表示名为') }}<span
                    style="color: #ff0033"
                    >'product'</span
                  >
                  {{ $t('的维度的值') }}。
                </p>
                <p>
                  <span style="color: #ff0033">{@[n]}</span>：{{ $t('数据中维度') }}
                  <span style="color: #ff0033">n</span> {{ $t('的值，如') }}
                  <span style="color: #ff0033">{@[3]}</span>{{ $t('表示维度 3 的值，从') }}
                  {{ $t('0 开始计数') }}。
                </p>
                <el-button
                  slot="reference"
                  icon="learun-icon-circle-question"
                />
              </el-popover>
            </template>
          </el-input>
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('图例设置')" name="5">
      <el-form-item :label="$t('是否显示')">
        <el-switch v-model="legend.show" />
      </el-form-item>
      <template v-if="legend.show">
        <el-form-item :label="$t('布局朝向')">
          <l-select
            :clearable="false"
            :options="legendOrientOptions"
            v-model="legend.orient"
          />
        </el-form-item>
        <el-form-item :label="$t('所在位置')">
          <l-select
            :clearable="false"
            :options="legendPositionOptions"
            v-model="legend.position"
          />
        </el-form-item>
        <el-form-item :label="$t('边距大小')">
          <el-input-number
            :min="0"
            controls-position="right"
            v-model="legend.padding"
          />
        </el-form-item>
        <el-form-item :label="$t('宽度自动')">
          <el-switch v-model="legend.widthAuto" />
        </el-form-item>
        <el-form-item v-if="!legend.widthAuto" :label="$t('宽度')">
          <el-input-number
            v-model="legend.width"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记宽度')">
          <el-input-number
            v-model="legend.itemWidth"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记高度')">
          <el-input-number
            v-model="legend.itemHeight"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记形状')">
          <l-select v-model="legend.itemIcon" :options="iconOptions" />
        </el-form-item>
        <el-form-item :label="$t('文本颜色')">
          <l-input-color v-model="legend.textStyle.color" />
        </el-form-item>
        <el-form-item :label="$t('格式文本')">
          <el-input class="l-input-icon" v-model="legend.formatter">
            <template slot="append">
              <el-popover
                placement="top-start"
                :title="$t('参数说明')"
                width="400"
                trigger="hover"
              >
                <p><span style="color: #ff0033">{name}</span>：{{ $t('数据名') }}。</p>
                <p><span style="color: #ff0033">{value}</span>：{{ $t('数据值') }}。</p>
                <el-button
                  slot="reference"
                  icon="learun-icon-circle-question"
                />
              </el-popover>
            </template>
          </el-input>
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('配色设置')" name="6">
      <div style="margin-bottom: 8px">
        <el-button type="primary" size="mini" @click="handleAddColor">{{
          $t("添加")
        }}</el-button>
        <el-button
          v-if="echarts.color && echarts.color.length > 0"
          type="danger"
          size="mini"
          @click="handleRemoveColor"
          >{{ $t("Delete") }}</el-button
        >
      </div>
      <template v-if="echarts.color">
        <el-form-item
          v-for="(color, index) in echarts.color"
          :key="index"
          label-width="0"
        >
          <l-input-color v-model="color.v" />
        </el-form-item>
      </template>
    </el-collapse-item>
    <l-dialog
      :title="$t('文本格式化脚本')"
      :visible.sync="jsCodeFromVisible"
      :height="528"
      :width="1000"
      @ok="handleCodeSave"
      @opened="handleOpenedCodeForm"
    >
      <l-layout :right="400">
        <l-code-mirror
          v-model="jsCode"
          mode="application/javascript"
        ></l-code-mirror>
        <template #right>
          <l-code-mirror readOnly v-model="jsTempCode"> </l-code-mirror>
        </template>
      </l-layout>
    </l-dialog>
  </div>
</template>
<script>
import configMixins from "../mixins/config";
export default {
  mixins: [configMixins()],
  computed: {
    pie() {
      return this.series.pie;
    },
  },
  data() {
    return {
      roseTypeOptions: [
        { label: "圆心角数据百分比", value: "radius" },
        { label: "圆心角相同", value: "area" },
      ],
      selectedModeOptions: [
        { label: "单选", value: "single" },
        { label: "多选", value: "multiple" },
      ],
    };
  },
  methods: {
    init(data) {
      const config = {
        echarts: {
          color: [],
          legend: {
            show: true,
            orient: "horizontal",
            position: "bottomCenter",
            widthAuto: true,
            width: 200,
            itemWidth: 25,
            itemHeight: 14,
            itemIcon: "",
            padding:8,
            textStyle: {
              color: "",
            },
            formatter: "",
          },

          series: {
            itemStyle: {
              borderRadius: 0, // 饼图特有
            },
            label: {
              show: true,
              lastShow: false, //为了实现进度条的效果加的属性
              color: "",
              position: "",
              fontWeight: "",
              formatterType: "label", //label  文本 fn 方法
              formatter: "",
              backgroundColor: '#fff'
            },
            pie: {
              radiusN: 0, //内圆半径
              radiusW: 50, //外圆半径
              centerH: 50, //圆心位置 水平
              centerV: 50, //圆心位置 垂直
              roseType: "", //南丁格尔玫瑰
              selectedMode: "", // 选中模式
              selectedModeNum:undefined
            },
          },
        },
        // 数据配置
        dataCode: "",
        labelKey: "",
        valueKey: "",
      };
      this.commonInit(data, config);
    },
    clearKeys() {
      this.config.labelKey = "";
      this.config.valueKey = "";
    },
  },
};
</script>

